<template>
    <page-header-wrapper>
        <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
            <a-form @submit="handleSubmit" :form="form">
                <a-alert v-if="state.isError" type="error" showIcon style="margin-bottom: 24px;"
                         :message="state.errorText"/>
                <a-form-item
                        label="旧密码"
                        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
                    <a-input
                            v-decorator="[
              'oldPassword',
              {rules: [{ required: true, message: '请输入旧密码' }]}
            ]"
                            name="oldPassword"
                            type="password"
                            placeholder="旧密码"/>
                </a-form-item>
                <a-form-item
                        label="新密码"
                        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
                    <a-input
                            v-decorator="[
              'newPassword',
              {rules: [{ required: true, message: '请输入新密码' }]}
            ]"
                            name="newPassword"
                            type="password"
                            placeholder="新密码"/>
                </a-form-item>
                <a-form-item
                        label="重复新密码"
                        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
                    <a-input
                            v-decorator="[
              'repeatPassword',
              {rules: [{ required: true, message: '请输入新密码' }]}
            ]"
                            name="repeatPassword"
                            type="password"
                            placeholder="重复新密码"/>
                </a-form-item>

                <a-form-item
                        :wrapperCol="{ span: 24 }"
                        style="text-align: center"
                >
                    <a-button htmlType="submit" type="primary"
                              :loading="state.submitBtn"
                              :disabled="state.submitBtn">提交</a-button>
                </a-form-item>
            </a-form>
        </a-card>
    </page-header-wrapper>
</template>

<script>
    import {hex_md5} from '@/utils/md5'
    import API from '@/api'

    export default {
        name: 'ChangePassword',
        data() {
            return {
                form: this.$form.createForm(this),
                state: {
                    isError: false,
                    errorText: '',
                    submitBtn: false
                }
            }
        },
        methods: {
            handleSubmit(e) {
                e.preventDefault()
                const {
                    form: {validateFields},
                    state
                } = this
                state.submitBtn = true
                const validateFieldsKey = ['oldPassword', 'newPassword', 'repeatPassword']
                validateFields(validateFieldsKey, {force: true}, (err, values) => {
                    if (!err) {
                        if (values.newPassword === values.repeatPassword) {
                            if (values.newPassword !== values.oldPassword) {
                                const params = {
                                    oldPw: hex_md5(values.oldPassword),
                                    newPw: hex_md5(values.newPassword)
                                }
                                API.User.ChangePassword(params)
                                    .then((data) => this.submitProcessor(data))
                                    .finally(() => {
                                        state.submitBtn = false
                                    })
                            }
                            else {
                                state.isError = true
                                state.errorText = '新旧密码一致'
                                setTimeout(() => {
                                    state.submitBtn = false
                                }, 600)
                            }
                        }
                        else {
                            state.isError = true
                            state.errorText = '重复密码不一致'
                            setTimeout(() => {
                                state.submitBtn = false
                            }, 600)
                        }
                    }
                    else {
                        state.isError = false
                        setTimeout(() => {
                            state.submitBtn = false
                        }, 600)
                    }
                })
            },
            submitProcessor(res) {
                if (res) {
                    this.state.isError = false
                    this.form.resetFields()
                    this.$notification.success({
                        message: '提示',
                        description: '密码修改成功'
                    })
                }
                else {
                    this.state.isError = true
                    this.state.errorText = '旧密码错误'
                }
            }
        }
    }
</script>
